<template>
  <view class="my-order-item my-card">
    <view class="flex justify-between pb-20" style="border-bottom: 1px solid #f5f5f5">
      <view>
        <slot name="head-left">
          <u-text mode="price" :text="price" color="#f33b15" bold></u-text>
        </slot>
      </view>
      <view>
        <slot name="head-right">
          <u-text :text="name" suffix-icon="arrow-right"></u-text>
        </slot>
      </view>
    </view>
    <view>
      <view class="send py-20" style="border-bottom: 1px solid #f5f5f5">
        <view class="flex gap-20 items-center">
          <u-icon :name="sendIcon" size="29"></u-icon>
          <view>
            <u-text :lines="2" :text="sendAddress"></u-text>
            <u-gap height="10"></u-gap>
            <u-text v-if="sendName" :text="`${sendName}`" type="info"></u-text>
          </view>
          <view @click.stop="toSendLocation">
            <u-icon name="map" size="28"></u-icon>
          </view>
        </view>
      </view>
      <view class="gather py-20">
        <view class="flex gap-20 items-center">
          <u-icon :name="gatherIcon" size="29"></u-icon>
          <view>
            <u-text :lines="2" :text="gatherAddress"></u-text>
            <u-gap height="10"></u-gap>
            <u-text v-if="gatherName" :text="`${gatherName}`" type="info"></u-text>
          </view>
          <view @click.stop="toGatherLocation">
            <u-icon name="map" size="28"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="actions flex justify-end" @click.stop>
      <slot name="actions"></slot>
    </view>
  </view>
</template>

<script setup>
  import sendIcon from "@/assets/images/send.png";
  import gatherIcon from "@/assets/images/gather.png";

  const emits = defineEmits(["toSendLocation",'toGatherLocation']);

  const props = defineProps({
    price: {
      type: Number,
      default: 0,
    },
    name: {
      type: String,
      default: "",
    },
    sendAddress: {
      type: String,
      default: "",
    },
    sendName: {
      type: String,
      default: "",
    },
    gatherAddress: {
      type: String,
      default: "",
    },
    gatherName: {
      type: String,
      default: "",
    },
    sendLocation: {
      type: Object,
      default: () => ({}),
    },
    gatherLocation: {
      type: Object,
      default: () => ({}),
    },
  });

  function toSendLocation() {
    emits("toSendLocation");
    // uni.openLocation({
    //   longitude: Number(e.longitude),
    //   latitude: Number(e.latitude),
    //   name: e.address,
    // });
  }

  function toGatherLocation() {
    emits("toGatherLocation");
    // uni.openLocation({
    //   longitude: Number(e.longitude),
    //   latitude: Number(e.latitude),
    //   name: e.address,
    // });
  }
</script>

<style lang="scss" scoped></style>
